<template>
  <div id="videoPlayer">
    <el-container>
      <el-header style="height: 100%;">
        <el-container>

          <el-header>
            <div class="title">
              <span>{{ formData.title }}</span>
            </div>
            <div class="video">
              <vue-core-video-player :src="formData.videoUrl" />
            </div>
            <div class="star">
              <a> <svg-icon icon-class="star"/> {{ formData.hotValue + formData.hotValueUnit }}</a>
            </div>
            <div class="describe">
              <span>描述:{{ formData.describe }}</span>
            </div>
          </el-header>

          <el-main>

            <!--            <el-card class="box-card" shadow="never">-->
            <!--              <el-row :gutter="20">-->
            <!--                <div v-for="o in 18" :key="o">-->
            <!--                  <el-col :span="2">-->
            <!--                    <div class="grid-content bg-purple">-->
            <!--                      <el-button class="btn">{{ '第'+o+'集' }}</el-button>-->
            <!--                    </div>-->
            <!--                  </el-col>-->
            <!--                </div>-->
            <!--              </el-row>-->
            <!--            </el-card>-->
          </el-main>
        </el-container>
      </el-header>
      <!--      <el-main style="height: 100%;">-->
      <!--        <div class="bigT1">-->
      <!--          <span>猜你喜欢</span>-->
      <!--        </div>-->
      <!--        <el-row :gutter="20" style="margin-left:0px;margin-right: 0px;">-->
      <!--          <el-col v-for="(o, index) in 4" :span="6" :key="o">-->
      <!--            <el-card :body-style="{ padding: '0px' }" shadow="never">-->
      <!--              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
      <!--                class="image">-->
      <!--              <div style="padding: 10px;">-->
      <!--                <el-link :underline="false">铁血战士</el-link>-->
      <!--                <div class="bottom clearfix">-->
      <!--                  <span>美国科幻大作</span>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-main>-->

    </el-container>
  </div>
</template>

<script>
import Xgplayer from 'xgplayer-vue'
import videoPlayer from './videoPlayer'
export default {
  components: {
    Xgplayer,
    videoPlayer
  },
  data() {
    return {
      formData: {},
      videoPlay: true,
      Player: null,
      bigTitle: '复仇者联盟',
      actor: '主演A',
      director: '导演A',
      local: '欧美',
      time: '2017-01-01',
      textarea: '',
      activeIndex: '1',
      circleUrl: '',
      currentPage1: 5
    }
  },
  created() {
    const query = this.$route.query
    if (query && query.src) {
      this.formData = JSON.parse(decodeURI(window.atob(query.src)))
      // this.config.url = this.formData.videoUrl
      // this.videoPlay = false
      // this.videoPlay = true
      console.log(this.formData)
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>

<style scoped>

.video {
  height: 800px;
  padding: 30px;
}

/deep/ .play-pause-layer .btn-control {
  display: none;
}

/deep/ .btn-control .tips {
  padding: 0px;
}

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
    margin-top: 15px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .btn {
    width: 100%;
  }

  .vdTitle {
    height: 130px;
    margin-bottom: 20px;
    margin-left: 5px;
  }

  .bigT {
    font-size: 30px;
    float: left;
    width: 100%;
  }

  .mess {

    font-size: 15px;
  }

  .mess1 {
    margin-top: 5px;
    float: left;
    width: 100%;
  }

  .bigT1 {
    font-size: 30px;
    float: left;
    width: 100%;
    margin-left: 10px;
  }

  .mess2 {
    font-size: 12px;
    float: left;
    margin-left: 20px;
    width: 50%;
  }

  .takk {
    margin-top: 10px;
    height: 50px;
  }

  .tak {
    float: left;
    margin-left: 10px;
  }

  .takIco {
    float: right;
    margin-top: 28px;
  }

  .title {
    padding-top: 20px;
    padding-bottom: 0px;
    font-size: 30px;
    font-weight: bolder;
  }

  .star {
    padding: 10px 10px;
    color: dimgray;
  }

  .describe {
    padding: 10px 10px;
    font-size: 15px;
    font-weight: 600;
    color: dimgray;
  }

</style>
